<template>
  <div class="top-list">
    <toplist-total @itemClick="itemClick"></toplist-total>
    <div class="top-list-music">
      <toplist-item></toplist-item>
      <sort-bar>
        <template v-slot:left>歌曲列表</template>
        <template v-slot:center>100首歌</template>
        <template v-slot:right>
          播放:
          <span class="play-count">{{list.playCount}}</span>次
        </template>
      </sort-bar>
      <toplist-detail></toplist-detail>
      <div class="comment">
        <sort-bar>
          <template #left>
            <div style="color: #666;text-align: left;">评论</div>
          </template>
          <template #center>
            <div 
            style="color: #666;text-align: left;" 
            v-if="comment">共{{comment.total}}条评论</div>
          </template>
        </sort-bar>
        <my-comment></my-comment>
        <comment :comment="comment" @pageChange="pageChange"></comment>
      </div>
    </div>
    <back-top></back-top>
  </div>
</template>

<script>
import ToplistTotal from './childcpns/ToplistTotal'
import ToplistDetail from './childcpns/ToplistDetail'
import ToplistItem from './childcpns/ToplistItem'

import SortBar from '@/components/content/sortbar/SortBar'
import BackTop from '@/components/common/backtop/BackTop'
import Comment from '@/components/common/comment/Comment'
import MyComment from '@/components/common/mycomment/MyComment'

import { _topList, _getComment } from '@/network/discover'

import { initData } from './childcpns/initMixin'
export default {
  mixins: [initData],
  components: {
    ToplistTotal,
    ToplistDetail,
    ToplistItem,
    SortBar,
    BackTop,
    Comment,
    MyComment
  },
  data() {
    return {
      comment: null
    }
  },
  methods: {
    //切换排行榜时修改sortbar的播放数目和评论
    itemClick(index) {
      _topList().then(res => {
        this.list = res.list[index]
      })
      _getComment(this.$route.query.id).then(res => {
        this.comment = res
      })
    },
    // 页码改变，切换评论
    pageChange(val) {
      _getComment(this.id, (val - 1) * 20).then(res => {
        this.comment = res
      })
    }
  }
}
</script>

<style scoped>
.top-list {
  display: flex;
  width: 980px;
  margin: 0 auto;
  border-right: 1px solid #666;
}

.sort-bar >>> .left {
  text-align: left;
}
.sort-bar >>> .right {
  text-align: right;
  flex: 8;
}
/* 右半边整体 */
.top-list-music {
  box-sizing: border-box;
  width: 740px;
  padding: 40px;
}

/* 右边sortbar部分 */
.play-count {
  box-sizing: border-box;
  color: #c20c0c;
  margin: 0 3px;
}

.comment {
  margin-top: 30px;
  padding: 20px 30px 40px;
  background-color: #fff;
}
</style>
